<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button id="btn1">增加</button>
    <button id="btn2">删除</button>
    <button id="btn3">修改</button>
    <button id="btn4">查询</button>
    <script src="http://www.jq22.com/jquery/1.4.4/jquery.min.js"></script>
    <script>
        function Person(name1,sex1) {
            this.name = name1;
            this.sex = sex1;
        }
        Person.prototype.show = function() {
            console.log('我的名字叫:' + this.name +'，我的性别是:' + this.sex );
        }
        // 常量的使用，必须大写
        let SHUAI_NAN = '男';
        let NV = '女';
        let students = [
            new Person('卢小青','女'),
            new Person('杨壮','男'),
            new Person('李继鹏','男'),
            new Person('1','女'),
            new Person('2','男'),
            new Person('3','男'),
        ];
        // 打印
        students[0].show();


        // 需求一：添加
        // 1. 绑定btn1点击事件
        $('#btn1').click(function () {
            // 2. 操作数组，添加一个对象进去
            students.push({ name: '凃俊雄', sex: '男' });
            // 3. 输出最终的结果
            console.log(students);
        });
        // 需求二：删除（函数版本）
        function deleteStu(index, count) {
            // 变量如果当前{}没有，会向上级查找   
            students.splice(index, count)
        }
        // 2. 编写一个函数：
        // 1.绑定btn2点击事件
        $('#btn2').click(function () {
            // 3. 操作数组，删除一个元素
            deleteStu(0, 1);
            // 4. 展示结果
            console.log(students);
        })


        // 需求三： 更改【变量不会向下级查找！】
        // 1： 绑定btn3点击事件
        $('#btn3').click(function () {
            
            // 2： 修改指定元素
            students[index].name = '张卧兵';
            students[index].sex = '男';
            // 3:  输出数据
            console.log(students);
            
            // let声明的变量 不会越级到上级
            function test() {
                let index = 0;
            }
        });


        // 需求四： 查询
        // 1： 绑定btn4点击事件
        $('#btn4').click(function () {
            // 根据索引获取
            console.log('获取的元素是:', students[students.length - 1]);
        });







    </script>


</body>

</html>